import React, { Component } from 'react';
import { Layout, Menu, Breadcrumb } from 'antd';
import Header from "../../components/header"
import Footer from "../../components/footer"
import Aside from "./components/aside";
import ContainerMain from "../../components/containerMain"
import Demo from "../../components/header/tabs.jsx"
import {
  DesktopOutlined,
  PieChartOutlined,
  FileOutlined,
  TeamOutlined,
  UserOutlined,
} from '@ant-design/icons';
import "./layout.scss";

const { Content,  Sider } = Layout;
const { SubMenu } = Menu;

export default class Index extends Component {
    state = {
        collapsed: false,
      };
    
      onCollapse = collapsed => {
        console.log(collapsed);
        this.setState({ collapsed });
      };
    render() {
        const { collapsed } = this.state;
        return (
        <Layout style={{ minHeight: '100vh', height:'100%'}}>
        <Sider theme="dark" className="site-layout-background" collapsible collapsed={collapsed} onCollapse={this.onCollapse}>
          <Aside/>  
        </Sider>
        
        <Layout className="site-layout" style={{minHeight: '100vh',height:'100%'}}>
          <Header style={{ padding: 0 }} />
          <Content style={{ margin: '7px 7px',height:'100%',position:'relative'}}>
          {/* <Demo/> */}
          <ContainerMain /> 
          </Content>
          {/* <Footer /> */}
        </Layout>
      </Layout>
        )
    }
}
